<template>
  <div class="fl">
    <van-tabs v-model:active="data.active">
      <van-tab
        v-for="(item, index) in data.fl_title"
        :title="item.title"
        :key="index"
      >
        内容 {{ index }}
      </van-tab>
    </van-tabs>

    <div class="btn" @click="more_btn">
      <div><van-icon name="more" /></div>
    </div>

    <van-popup
      v-model:show="data.showTop"
      closeable
      position="top"
      :style="{ height: '40%' }"
    >
      <div class="volume-wrapper" style="margin-top: 50px">
        <div
          class="volume-item"
          v-for="(item, index) in data.fl_title"
          :key="index"
        >
        <div :class="data.active ==index?'check_item':'item_box'" @click="go_wz_title(index)">
            {{item.title}}
            </div>
        </div>
      </div>
    </van-popup>
  </div>
</template>

<script setup lang="ts">
import { reactive } from "vue";
const data = reactive({
  active: "",
  showTop: false,
  fl_title: [
    { title: "前端" },
    { title: "Java" },
    { title: "Python" },
    { title: "人工智能" },
    { title: "AIGC" },
    { title: "算法" },
    { title: "移动开发" },
    { title: "HarmonyOS" },
    { title: "推荐" },
    { title: "关注" },
    { title: "运维" },
  ],
});

const more_btn = () => {
  data.showTop = !data.showTop;
};
const go_wz_title = (index) => {
  console.log(index);

  data.showTop = !data.showTop;
  data.active = index;
};
</script>

<style scoped>
.fl {
}

.box {
  display: flex;
}
.left {
}
.btn {
  position: absolute;
  top: 12px;
  right: 0;
}

.volume-wrapper {
  display: flex; /* flex布局 */

  /* justify-content: flex-start;  */
  /* 左对齐 */

  flex-wrap: wrap; /* 换行 */
}

.volume-item {
  /* margin-right: 20px;  */
  /* 每个元素右间距设置为20px */

  /* 计算每个元素的宽度：20px是前三个元素的间距（margin-right）和，除以4即为每个元素的宽度 */

  /* width: calc((100% - 20px) / 4); */
  /* width: calc((100% - 20px) / 3); */
}

/* 将下标是4的倍数元素的margin-right设置为0，即将每行最后一个元素的margin-right置0 */

.volume-item:nth-of-type(4n + 0) {
  margin-right: 0;
}

.item_box{
    width: 84px;
    height: 50px;
    margin: 5px 4px;
    background-color: #F5F5F6;
    font-size: 14px;
    line-height: 50px;
    background: rgba(85,86,102,.06);
    border-radius: 5px;
    text-align: center;

}

.check_item{}
.check_item{
    width: 84px;
    height: 50px;
    margin: 5px 4px;
    line-height: 50px;
    background: red;
    border-radius: 5px;
    text-align: center;
    background-color: #E6E6E8;
    font-size: 14px;
}
</style>